﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>飞机加速减速HTML5游戏</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<style>
body {
	margin:0;
	padding:0;
	background:#000;
}
canvas {
	display:block;
	margin:0 auto;
	background:#f8982b;
}
</style>

</head>
<body>

<canvas></canvas>

<script type="text/javascript">
if ( !window.requestAnimationFrame ) {

window.requestAnimationFrame = ( function() {

	return window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.oRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

		window.setTimeout( callback, 1000 / 60 );

	};

} )();

}

// stats.js r6 - https://github.com/mrdoob/stats.js
var Stats=function(){function s(a,g,d){var f,c,e;for(c=0;c<30;c++)for(f=0;f<73;f++)e=(f+c*74)*4,a[e]=a[e+4],a[e+1]=a[e+5],a[e+2]=a[e+6];for(c=0;c<30;c++)e=(73+c*74)*4,c<g?(a[e]=b[d].bg.r,a[e+1]=b[d].bg.g,a[e+2]=b[d].bg.b):(a[e]=b[d].fg.r,a[e+1]=b[d].fg.g,a[e+2]=b[d].fg.b)}var r=0,t=2,g,u=0,j=(new Date).getTime(),F=j,v=j,l=0,w=1E3,x=0,k,d,a,m,y,n=0,z=1E3,A=0,f,c,o,B,p=0,C=1E3,D=0,h,i,q,E,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mb:{bg:{r:48,g:16,
b:26},fg:{r:255,g:0,b:128}}};g=document.createElement("div");g.style.cursor="pointer";g.style.width="80px";g.style.opacity="0.9";g.style.zIndex="10001";g.addEventListener("click",function(){r++;r==t&&(r=0);k.style.display="none";f.style.display="none";h.style.display="none";switch(r){case 0:k.style.display="block";break;case 1:f.style.display="block";break;case 2:h.style.display="block"}},!1);k=document.createElement("div");k.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
2)+","+Math.floor(b.fps.bg.b/2)+")";k.style.padding="2px 0px 3px 0px";g.appendChild(k);d=document.createElement("div");d.style.fontFamily="Helvetica, Arial, sans-serif";d.style.textAlign="left";d.style.fontSize="9px";d.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";d.style.margin="0px 0px 1px 3px";d.innerHTML='<span style="font-weight:bold">FPS</span>';k.appendChild(d);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";k.appendChild(a);
m=a.getContext("2d");m.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";m.fillRect(0,0,a.width,a.height);y=m.getImageData(0,0,a.width,a.height);f=document.createElement("div");f.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";f.style.padding="2px 0px 3px 0px";f.style.display="none";g.appendChild(f);c=document.createElement("div");c.style.fontFamily="Helvetica, Arial, sans-serif";c.style.textAlign="left";c.style.fontSize=
"9px";c.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";c.style.margin="0px 0px 1px 3px";c.innerHTML='<span style="font-weight:bold">MS</span>';f.appendChild(c);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";f.appendChild(a);o=a.getContext("2d");o.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";o.fillRect(0,0,a.width,a.height);B=o.getImageData(0,0,a.width,a.height);try{performance&&performance.memory&&performance.memory.totalJSHeapSize&&
(t=3)}catch(G){}h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.mb.bg.r/2)+","+Math.floor(b.mb.bg.g/2)+","+Math.floor(b.mb.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";g.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize="9px";i.style.color="rgb("+b.mb.fg.r+","+b.mb.fg.g+","+b.mb.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MB</span>';
h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);q=a.getContext("2d");q.fillStyle="#301010";q.fillRect(0,0,a.width,a.height);E=q.getImageData(0,0,a.width,a.height);return{domElement:g,update:function(){u++;j=(new Date).getTime();n=j-F;z=Math.min(z,n);A=Math.max(A,n);s(B.data,Math.min(30,30-n/200*30),"ms");c.innerHTML='<span style="font-weight:bold">'+n+" MS</span> ("+z+"-"+A+")";o.putImageData(B,0,0);F=j;if(j>
v+1E3){l=Math.round(u*1E3/(j-v));w=Math.min(w,l);x=Math.max(x,l);s(y.data,Math.min(30,30-l/100*30),"fps");d.innerHTML='<span style="font-weight:bold">'+l+" FPS</span> ("+w+"-"+x+")";m.putImageData(y,0,0);if(t==3)p=performance.memory.usedJSHeapSize*9.54E-7,C=Math.min(C,p),D=Math.max(D,p),s(E.data,Math.min(30,30-p/2),"mb"),i.innerHTML='<span style="font-weight:bold">'+Math.round(p)+" MB</span> ("+Math.round(C)+"-"+Math.round(D)+")",q.putImageData(E,0,0);v=j;u=0}}}};

//Insane - Tech Demo
(function( Insane, $, undefined ) {

	//Public Vars
	Insane.WIDTH = 320;
	Insane.HEIGHT = 480;
	Insane.scale =  1,
	Insane.offset = {top: 0, left: 0},
	Insane.RATIO =  null,
	Insane.currentWidth =  null,
	Insane.currentHeight =  null,
	Insane.canvas = null,
	Insane.ctx =  null,
	Insane.ua = null,
	Insane.android = null,
	Insane.ios = null,
	
	Insane.startTime = Date.now(),
	Insane.dtime,
	Insane.stats, //FPS stats
	
	Insane.rychlost = 80,
	Insane.hvezdy = [],
	Insane.planety = [],
	Insane.boostery = [],
	Insane.slowery = [],
	Insane.player
	
	//FPS init
	function fpsInit() {
		stCon = document.createElement( 'div' );
		document.body.appendChild( stCon );
		Insane.stats = new Stats();
		Insane.stats.domElement.style.position = 'absolute';
		Insane.stats.domElement.style.top = '0px';
		stCon.appendChild(Insane.stats.domElement);
	} 
	
	//Init funkce
	Insane.init = function() {
		Insane.RATIO = Insane.WIDTH / Insane.HEIGHT;
		Insane.currentWidth = Insane.WIDTH;
		Insane.currentHeight = Insane.HEIGHT;
		Insane.canvas = document.getElementsByTagName('canvas')[0];
		Insane.canvas.width = Insane.WIDTH;
		Insane.canvas.height = Insane.HEIGHT;
		Insane.ctx = Insane.canvas.getContext('2d');
		Insane.ua = navigator.userAgent.toLowerCase();
		Insane.android = Insane.ua.indexOf('android') > -1 ? true : false;
		Insane.ios = ( Insane.ua.indexOf('iphone') > -1 || Insane.ua.indexOf('ipad') > -1  ) ? true : false;
		
		// Controls
		window.addEventListener('click', function(e) {
			e.preventDefault();
			//Insane.player1.x = e.clientX - Insane.offset.left  / Insane.scale;
			//console.log(Insane.player1.x);
		}, false);
		// listen for touches
		window.addEventListener('touchstart', function(e) {
			e.preventDefault();
			Insane.player1.x = (event.touches[0].pageX - Insane.offset.left) / Insane.scale;
		}, false);
		window.addEventListener('touchmove', function(e) {
			e.preventDefault();
			Insane.player1.x = (event.touches[0].pageX - Insane.offset.left) / Insane.scale;
		}, false);
		window.addEventListener('touchend', function(e) {
			e.preventDefault();
			Insane.player1.x = (event.touches[0].pageX - Insane.offset.left) / Insane.scale;
		}, false);
		
		window.addEventListener('keydown', function(e) {
			if(e.keyCode == "37") {
				Insane.player1.x -= 1*Insane.rychlost/40;
			}
			if(e.keyCode == "39") {
				Insane.player1.x += 1*Insane.rychlost/40;
			}
		}, false);
		
		window.addEventListener('mousemove', function(e) {
			 e.preventDefault();
			 Insane.player1.x = (e.clientX - Insane.offset.left) / Insane.scale;
		}, false);
		window.addEventListener('mousedown', function(e) {
			 e.preventDefault();
			 //Insane.player1.x = e.clientX - Insane.offset.left;
		}, false);
		//
		
		Insane.resize();
		fpsInit();
		Insane.player1 = new Insane.Player();
		Insane.player1.reset();
		Insane.loop();
	}
	
	//Resize funkce
	Insane.resize = function() {
		Insane.currentHeight = window.innerHeight;
		Insane.currentWidth = Insane.currentHeight * Insane.RATIO;
		if (Insane.android || Insane.ios) {
			document.body.style.height = (window.innerHeight + 50) + 'px';
		}
		Insane.canvas.style.width = Insane.currentWidth + 'px';
		Insane.canvas.style.height = Insane.currentHeight + 'px';
		Insane.scale = Insane.currentWidth / Insane.WIDTH;
		Insane.offset.top = Insane.canvas.offsetTop;
		Insane.offset.left = Insane.canvas.offsetLeft;
		window.setTimeout(function() {
			window.scrollTo(0,1);
		}, 1);
	}
	
	//Main Loop
	Insane.loop = function() {
		requestAnimationFrame(Insane.loop);
		Insane.stats.update();
	
		Insane.update();
		Insane.render();
	}
	
	//Update
	Insane.update = function() {
		Insane.dtime = Date.now() - Insane.startTime;
		
		// Hvezdy random add
		if(Math.random()<0.3){
			Insane.hvezdy.push(new Insane.Hvezda());
		}
		// Hvezdy rychlost + remove
		for (i = 0; i < Insane.hvezdy.length; i += 1) {
			//rychlost
			Insane.hvezdy[i].y += Insane.rychlost/60;
			//remove
			if(Insane.hvezdy[i].y > 480) {
				Insane.hvezdy.splice(i, 1);
			}
		}
		
		// Planety random add
		if(Math.random()<0.01){
			Insane.planety.push(new Insane.Planeta());
		}
		// Planety rychlost + remove
		for (i = 0; i < Insane.planety.length; i += 1) {
			//rychlost
			Insane.planety[i].y += Insane.rychlost/40;
			//remove
			if(Insane.planety[i].y > 530) {
				Insane.planety.splice(i, 1);
			}
		}
		
		// Boostery random add
		if(Math.random()<0.01){
			Insane.boostery.push(new Insane.Booster());
		}
		// Boostery rychlost + remove
		for (i = 0; i < Insane.boostery.length; i += 1) {
			//rychlost
			Insane.boostery[i].y += Insane.rychlost/20;
			//remove
			if(Insane.boostery[i].y > 530) {
				Insane.boostery.splice(i, 1);
			}
		}
		
		// Slowery random add
		if(Math.random()<0.01){
			Insane.slowery.push(new Insane.Slower());
		}
		// Slowery rychlost + remove
		for (i = 0; i < Insane.slowery.length; i += 1) {
			//rychlost
			Insane.slowery[i].y += Insane.rychlost/20;
			//remove
			if(Insane.slowery[i].y > 530) {
				Insane.slowery.splice(i, 1);
			}
		}
		
		// Player speed
		Insane.player1.km = Insane.rychlost;
		// Player position
		if(Insane.player1.x < 10) {
			Insane.player1.x = 10;
		}
		if(Insane.player1.x > 310) {
			Insane.player1.x = 310;
		}
		
		// Kolize Boostery
		for (i = 0; i < Insane.boostery.length; i += 1) {
			if(Insane.boostery[i].y > 300) {
				if(Insane.kolizeBoostery(Insane.player1,Insane.boostery[i])) {
					Insane.rychlost += Insane.boostery[i].km;
					Insane.boostery.splice(i, 1);
				}
			}
		}
		
		// Kolize Slowery
		for (i = 0; i < Insane.slowery.length; i += 1) {
			if(Insane.slowery[i].y > 300) {
				if(Insane.kolizeSlowery(Insane.player1,Insane.slowery[i])) {
					Insane.rychlost -= Insane.slowery[i].km;
					Insane.slowery.splice(i, 1);
				}
			}
		}
		
	}
	
	//Render
	Insane.render = function() {
		Insane.Draw.clear();
		
		// Hvezdy render
		for (i = 0; i < Insane.hvezdy.length; i += 1) {
			Insane.hvezdy[i].render();
		}
		
		// Planety render
		for (i = 0; i < Insane.planety.length; i += 1) {
			Insane.planety[i].render();
		}
		
		// Boostery render
		for (i = 0; i < Insane.boostery.length; i += 1) {
			Insane.boostery[i].render();
		}
		
		// Slowery render
		for (i = 0; i < Insane.slowery.length; i += 1) {
			Insane.slowery[i].render();
		}
		
		// Player render
		Insane.Draw.player(Insane.player1.x,Insane.player1.y,Insane.player1.km);
		
		//Insane.Draw.player(Math.sin(Insane.dtime/600)*20+Insane.player1.x,Insane.player1.y,Insane.player1.km);
		
		//Insane.Draw.booster(50,50,1);
		//Insane.Draw.slower(160,160,20);
		//Insane.Draw.hvezda(200,200,0.6);
		//Insane.Draw.planeta(300,150,20);
	}
	
	//Draw objects
	Insane.Draw = {
		
		clear: function() {
			Insane.ctx.clearRect(0, 0, Insane.canvas.width, Insane.canvas.height);
		},
		
		player: function(x, y, km) {
			//raketa
			Insane.ctx.fillStyle = "#000";
			Insane.ctx.beginPath();
				Insane.ctx.moveTo(x, y-20);
				Insane.ctx.lineTo(x+14,y+7);
				Insane.ctx.lineTo(x,y+19);
				Insane.ctx.lineTo(x-14,y+7);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			//kabina
			Insane.ctx.fillStyle = "#fff";
			Insane.ctx.beginPath();
				Insane.ctx.moveTo(x, y-15);
				Insane.ctx.lineTo(x+3,y-10);
				Insane.ctx.lineTo(x,y-5);
				Insane.ctx.lineTo(x-3,y-10);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			Insane.Draw.motor(x,y,km);
			Insane.Draw.infoText(x,y,km + " Km/h", 20);
		},
		
		motor: function(x,y,km) {
			//levy motor
			Insane.ctx.fillStyle = "#fff";
			Insane.ctx.beginPath();
				Insane.ctx.moveTo(x-9, y-15+28);
				Insane.ctx.lineTo(x+3-7,y-10+28);
				Insane.ctx.lineTo(x-9,y-5+28+km/20);
				Insane.ctx.lineTo(x-3-9,y-10+28);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			//pravy motor
			Insane.ctx.fillStyle = "#fff";
			Insane.ctx.beginPath();
				Insane.ctx.moveTo(x+9, y-15+28);
				Insane.ctx.lineTo(x+3+9,y-10+28);
				Insane.ctx.lineTo(x+9,y-5+28+km/20);
				Insane.ctx.lineTo(x-3+7,y-10+28);
			Insane.ctx.closePath();
			Insane.ctx.fill();
		},
		
		booster: function(x,y,km) {
			//body
			Insane.ctx.fillStyle = "#000";
			Insane.ctx.beginPath();
				Insane.ctx.arc(x, y, Math.abs(km-21)+15, 0 , 2 * Math.PI, false);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			//eye
			Insane.ctx.fillStyle = "#fff";
			Insane.ctx.beginPath();
				Insane.ctx.arc(x, y, 5, 0 , 2 * Math.PI, false);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			Insane.Draw.infoText(x,y, "+ " + km + " Km/h", Math.abs(km-21)+15);
		},
		
		slower: function(x,y,km) {
			//body
			Insane.ctx.fillStyle = "#000";
			Insane.ctx.beginPath();
				Insane.ctx.rect(x-(km*5/2) ,y-(km*5/2) , km*5, km*5);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			//eye
			Insane.ctx.fillStyle = "#fff";
			Insane.ctx.beginPath();
				Insane.ctx.arc(x, y, 5, 0 , 2 * Math.PI, false);
			Insane.ctx.closePath();
			Insane.ctx.fill();
			
			Insane.Draw.infoText(x,y, "- " + km + " Km/h", km*5);
		},
		
		hvezda: function(x,y,opacity) {
			Insane.ctx.fillStyle = 'rgba(255,255,255,'+opacity*1+')';
			Insane.ctx.beginPath();
				Insane.ctx.arc(x, y, 3, 0, 2 * Math.PI, false);
			Insane.ctx.closePath();
			Insane.ctx.fill();
		},
		
		planeta: function(x,y,size) {
			Insane.ctx.fillStyle = "#df7a1c";
			Insane.ctx.beginPath();
				Insane.ctx.arc(x,y, size*5, 0, 2 * Math.PI, false);
			Insane.ctx.closePath();
			Insane.ctx.fill();
		},
		
		infoText: function(x,y,text,scale) {
			
			Insane.ctx.beginPath();
			Insane.ctx.moveTo(x+10, y-7);
			Insane.ctx.lineTo(x+20*scale/20, y-17*scale/20);
			Insane.ctx.stroke();
			Insane.ctx.lineTo((x+20*scale/20)+50, y-17*scale/20);
			Insane.ctx.stroke();
			Insane.ctx.closePath();	
			
			Insane.ctx.font = '14px Arial';
			Insane.ctx.fillStyle = '#000';
			Insane.ctx.textAlign = 'left';
			Insane.ctx.fillText(text, x+20*scale/20, y-19*scale/20);
		}
	}
	
	Insane.Hvezda = function() {
		this.x = Math.random()*320;
		this.y = -3;
		this.opacity = Math.random()*1;
		this.remove = false;
		
		this.render = function() {
			Insane.Draw.hvezda(this.x,this.y,this.opacity);
		}
	};
	
	Insane.Planeta = function() {
		this.x = Math.random()*320;
		this.y = -50;
		this.size = Math.random()*10;
		this.remove = false;
		
		this.render = function() {
			Insane.Draw.planeta(this.x,this.y,this.size);
		}
	};
	
	Insane.Booster = function() {
		this.x = Math.random()*320;
		this.y = -50;
		this.km = Math.ceil(Math.random()*20);
		this.remove = false;
		
		this.render = function() {
			Insane.Draw.booster(this.x,this.y,this.km);
		}
	};
	
	Insane.Slower = function() {
		this.x = Math.random()*320;
		this.y = -50;
		this.km = Math.ceil(Math.random()*20);
		this.remove = false;
		
		this.render = function() {
			Insane.Draw.slower(this.x,this.y,this.km);
		}
	};
	
	Insane.Player = function() {
		this.x = 0;
		this.y = 0;
		this.km = 0;
		
		this.reset = function() {
			this.x = 160;
			this.y = 430;
			this.km = 80;
		}
		
		this.render = function() {
			Insane.Draw.player(this.x,this.y,this.km);
		}
	}
	
	Insane.kolizeBoostery = function(a, b) {
		var distance_squared = (((a.x - b.x) * (a.x - b.x)) + ((a.y - b.y) * (a.y - b.y)));
		//console.log(a.y);
		//console.log(b.y);
		distance_squared = Math.sqrt(distance_squared);
		//console.log("dist: " + distance_squared + " rad: " + (Math.abs(b.km-21)+15));
		if (distance_squared < (Math.abs(b.km-21)+15)) {
			return true;
		}
		else {
			return false;
		}
	}
	
	Insane.kolizeSlowery = function(a, b) {
		var distance_squared = (((a.x - b.x) * (a.x - b.x)) + ((a.y - b.y) * (a.y - b.y)));
		//console.log(a.y);
		//console.log(b.y);
		distance_squared = Math.sqrt(distance_squared);
		//console.log("dist: " + distance_squared + " rad: " + (b.km*5));
		if (distance_squared < (b.km*4)) {
			return true;
		}
		else {
			return false;
		}
	}

}( window.Insane = window.Insane || {}, jQuery ));

window.addEventListener('load', Insane.init, false);
window.addEventListener('resize', Insane.resize, false);
</script>
</body>
</html>